<template>
  <div class="policy_continer">
    <div class="address">
      <div style="margin-top: 5px;margin-right: 10px;margin-left:30px">
        <span style="font-size: 20px">请选择政策地区</span>
      </div>
      <v-distpicker province="河南省" city="濮阳市" area="南乐县" @selected="sel" style="margin-right:20px"></v-distpicker>
      <el-button>政策查询</el-button>
    </div>
    <div class="policy_main">
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:10px">
          <el-breadcrumb-item>就业/创业相关政策</el-breadcrumb-item>
        </el-breadcrumb>
        <W-PolicyList :Policies="Policies"></W-PolicyList>
        <div class="page">
            <el-pagination
              @current-change="handleCurrentChange($event,index)"
              :background="true"
              layout="prev, pager, next"
              :current-page="currentPage"
              :page-size="pageSize"
              :total="total">
            </el-pagination>
        </div>
      </el-main>
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'
import PolicyList from '../Policy/policyList'
export default {
  components: {
    VDistpicker: VDistpicker,
    'W-PolicyList': PolicyList
  },
  data () {
    return {
      Policies: [],
      total: 0,
      currentPage: 1,
      pageSize: 50
    }
  },
  methods: {
    sel: function (data) {
      this.citydata = data.province.value + data.city.value + data.area.value
      console.log(this.citydata)
    },
    queryPolicy () {
      this.$axios.get('policy/getPolicy', {
        params: {
          current: this.currentPage,
          size: 50
        }
      }).then(response => {
        this.$set(this, 'Policies', response.data.data.records)
        this.total = response.data.data.total
        this.pageSize = response.data.data.size
        this.currentPage = response.data.data.current
      }).catch(error => {
        console.log(error)
      })
    },
    handleCurrentChange (val, index) {
      this.$axios.get('policy/getPolicy', {
        params: {
          current: val,
          size: 50
        }
      }).then(response => {
        console.log(response.data)
        this.$set(this, 'Policies', response.data.data.records)
        this.total = response.data.data.total
        this.pageSize = response.data.data.size
        this.currentPage = response.data.data.current
      }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted () {
    this.queryPolicy()
  }
}
</script>

<style lang="less" scoped>
.policy_continer{
  margin-top: 20px;
}
.address{
  display: flex;
}
.policy_main{
  background-color: white;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.page{
  text-align: center;
}
</style>
